<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadFileUrl"
      :on-success="fileUploadData"
      :limit="limit"
      :width="width"
      :height="height"
      :list-type="listType"
      :file-list="fileListPic"
      :on-exceed="handleError"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforePictureUpload"
      accept=".jpg, .jpeg, .png, .gif, .JPG, .JPEG, .PBG, .GIF, .mp4,.MP4,AVI,.MPEG/.MPG/.DAT,.txt,.pdf,/doc"
      :on-remove="handleRemove"
      :disabled="disabled"
      :headers="headers"
    >
      <i class="el-icon-plus"></i>
      <div class="tip">{{tip}}</div>
    </el-upload>
    <el-dialog :closeOnClickModal="false" :visible.sync="dialogVisible" :modal="false">
      <iframe width="100%" :src="dialogImageUrl" height="400px"></iframe>
      <!-- <img width="100%" :src="dialogImageUrl" alt=""> -->
    </el-dialog>
  </div>
</template>
<script>
import util from "@/libs/util";
export default {
  data() {
    return {
      uploadFileUrl: "",
      fileListPic: [],
      dialogImageUrl: "",
      dialogVisible: false,
      cookieInfo: {}
    };
  },
  props: {
    value: {},
    limit: {},
    tip: {},
    listType: {
      default: "text"
    },
    disabled: {
      default: false
    },
    width: {},
    height: {}
  },
  computed: {
    headers() {
      return {
        Authorization: util.cookies.get("token"),
        uuid: util.cookies.get("uuid")
      };
    }
  },
  created() {
    /**
     * @dev 文件上传地址
     */
    this.uploadFileUrl = "/api/common/upload";
    if (!this.value) return false;
    this.fileListPic = this.value;
  },

  watch: {
    value(val) {
      console.log(val);
      this.fileListPic = val;
      this.$emit("upload",val[0]?val[0].url:'')
    }
  },
  methods: {
    emitParentFiles(fileList) {
      return fileList.map(val => {
        return {
          name: val.name,
          url: val.response
            ? process.env.VUE_APP_IMG_BASE + val.response.data
            : val.url
        };
      });
    },
    /**
     * @dev 文件上传之后的回调处理
     * @des 由于后端接口默认 成功时，code=='0000'
     *      因此判断返回code正常时为上传成功，
     *      其它状态抛出提示，不进行继续操作
     */
    fileUploadData(res, file, fileList) {
      if (res && res.code ==200) {
        this.$emit("input", this.emitParentFiles(fileList));
      } else {
        this.$message.error(res.msg || "上传失败");
        file.status = "defeated";
        file.url = "";
      }
    },
    handleRemove(file, fileList) {
      this.$emit("input", this.emitParentFiles(fileList));
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleError() {
      this.$message({
        message: "只能上传" + this.limit + "个图片",
        type: "warning"
      });
    },
    beforePictureUpload(file) {
      let _this = this;
      let isSize = false;
      // if (file.type.indexOf("image") < 0) {
      //   this.$alert("图片格式不正确", "提示", { confirmButtonText: "确定" });
      //   return false;
      // }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$alert("上传图片大小不能超过 10MB!", "提示", {
          confirmButtonText: "确定"
        });
        return false;
      }
    }
  }
};
</script>
<style scoped rel="stylesheet/scss"  lang="scss">
.tip {
  line-height: 20px;
  margin-top: -60px;
  text-align: left;
  padding: 0 10px;
  font-size: 12px;
}

</style>
<style>
.el-upload-list__item {
    transition: none !important;
  }
</style>
